@border:1px solid #ccc;
@border1:1px solid red;
*{
    padding: 0;
    margin: 0;
}
.container{
    border: @border;
    .top{
        display: flex;
        justify-content: space-between;
        height: 300px;
        border: @border;
        .topleft{
            width: 350px;
            height: 80%;
            border: @border1;
        }
        .topright{
            width: 300px;
            height: 50%;
            border: @border1;
        }
    }
    .one_hour{
        height: 170px;
        border: @border;
        .one_hour_word{
            height: 25px;
            // border: @border;
        }
        #one_hour_detail1{
            text-align: center;
            height: 143px;
            .hour{
                margin-top: 24px;
                text-align: center;
                // flex: 1;
                // border:@border1 ;
            }
        }
    }
    .bigbody{
        display: flex;
        margin-top: 20px;
        height: 500px;
        border: @border;
        .sevendays{
            width: 60%;
            height: 90%;
            border: @border1;
        }
        .life{
            width: 40%;
            height: 90%;
            border: @border1;
            .sixbox{
                width: 90%;
                height: 90%;
                border: @border1;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 45% 45%;
                grid-template-rows: 30% 30% 30%;
                border: @border1;
                justify-content: space-around;
                align-content: space-around;
                
            }
        }
    }
}
#sunny{
    display:inline-block;
    border:3px solid #ccc;
    width:16px;
    height:16px;
    border-radius:16px;
    position: relative;
    top: 5px;
}